<template>
    <div class="app">
        <myNavbar title="优惠券"></myNavbar>
        <div class="coupon_choose">
            <div class="coupon_choose-list" @click="swichNav(0)">
                <text :class="[currentTab==0 ? 'coupon_choose_title' : 'coupon_choose_title_no']">满减券</text>
                <div :class="[currentTab==0 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
            </div>
            <div class="coupon_choose-list" @click="swichNav(1)">
                <text :class="[currentTab==1 ? 'coupon_choose_title' : 'coupon_choose_title_no']">折扣券</text>
                <div :class="[currentTab==1 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
            </div>
            <div class="coupon_choose-list" @click="swichNav(2)">
                <text :class="[currentTab==2 ? 'coupon_choose_title' : 'coupon_choose_title_no']">兑换券</text>
                <div :class="[currentTab==2 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
            </div>
        </div>
        <slider :index="currentTab" class="swiper-box" :style="{height:allHeight}" @change="bindChange">
            <div class="swiper-item-box">
                <div class="coupon-shopList bs" v-if="fullReductionCouponList.length>0&&currentTab==0">
                    <div class="coupon-couponList-top">
                        <image :src="coupon.mchLogo" class="mchLogo"></image>
                        <text class="mchName">{{coupon.mchName}}</text>
                    </div>
                    <list style="flex: 1;">
                        <cell v-for="(item,index) in fullReductionCouponList">
                            <div class="coupon-couponList">
                                <div class="coupon-couponList-port1">
                                    <div class="coupon-couponList-port1-inner">
                                        <text class="coupon-couponList-port1-text1">￥</text>
                                        <text class="coupon-couponList-port1-text2">{{item.amount}}</text>
                                    </div>
                                </div>
                                <div class="coupon-couponList-port2">
                                    <div>
                                        <text class="coupon-couponList-port2-text1">{{item.name}}</text>
                                    </div>
                                    <div>
                                        <text class="coupon-couponList-port2-text2">适用范围：{{item.tag}}</text>
                                    </div>
                                    <div>
                                        <text class="coupon-couponList-port2-text3">有限期至{{item.endDate}}</text>
                                    </div>
                                </div>
                            </div>
                        </cell>
                    </list>

                </div>
                <div class="gap" v-if="fullReductionCouponList.length>0&&currentTab==0"></div>
                <div class="coupon-none" v-if="fullReductionCouponList.length===0&&currentTab==0">
                    <image class="coupon-none-image " src="https://rzico.oss-cn-shenzhen.aliyuncs.com/none-data/kongneirong.png"></image>
                    <div>
                        <text class="coupon-none-text">您还没有相关的优惠券</text>
                    </div>
                </div>
                <div class="coupon-shopList bs" v-if="discountCouponList.length>0&&currentTab==1">
                    <div class="coupon-couponList-top">
                        <image :src="coupon.mchLogo" class="mchLogo"></image>
                        <text class="mchName">{{coupon.mchName}}</text>
                    </div>
                    <list>
                        <cell v-for="(item,index) in discountCouponList">
                            <div class="coupon-couponList">
                                <div class="coupon-couponList-port1">
                                    <div class="coupon-couponList-port1-inner">
                                        <text class="coupon-couponList-port1-text2">{{item.amount}}</text>
                                        <text class="coupon-couponList-port1-text1">折</text>
                                    </div>
                                </div>
                                <div class="coupon-couponList-port2">
                                    <div>
                                        <text class="coupon-couponList-port2-text1">{{item.name}}</text>
                                    </div>
                                    <div>
                                        <text class="coupon-couponList-port2-text2">适用范围：{{item.tag}}</text>
                                    </div>
                                    <div>
                                        <text class="coupon-couponList-port2-text3">有限期至{{item.endDate}}</text>
                                    </div>
                                </div>
                            </div>
                        </cell>
                    </list>
                </div>
                <div class="gap" v-if="discountCouponList.length>0&&currentTab==1"></div>
                <div class="coupon-none" v-if="discountCouponList.length==0&&currentTab==1">
                    <image class="coupon-none-image " src="https://rzico.oss-cn-shenzhen.aliyuncs.com/none-data/kongneirong.png"></image>
                    <text class="coupon-none-text">您还没有相关的折扣券</text>
                </div>
                <div class="coupon-shopList bs" v-if="exchangeCouponList.length>0&&currentTab==2">
                    <div class="coupon-couponList-top">
                        <image :src="coupon.mchLogo" class="mchLogo"></image>
                        <text class="mchName">{{coupon.mchName}}</text>
                    </div>
                    <list style="flex: 1;">
                        <cell v-for="(item,index) in exchangeCouponList">
                            <div class="coupon-couponList">
                                <div class="coupon-couponList-port1">
                                    <image :src="item.productThumbnail"
                                           style="width: 130px;height:130px;border-radius: 6px;"></image>
                                </div>
                                <div class="coupon-couponList-port2">
                                    <div>
                                        <text class="coupon-couponList-port2-text1">兑换:{{item.name}}</text>
                                    </div>
                                    <div>
                                        <text class="coupon-couponList-port2-text3">有限期至 {{item.endDate}}</text>
                                    </div>
                                </div>
                                <div class="coupon-couponList-port3" @click="useCoupon(item.productId)">
                                    <text class="coupon-couponList-port3_Title">去使用</text>
                                </div>
                            </div>
                        </cell>
                    </list>
                </div>
                <div class="gap" v-if="exchangeCouponList.length>0&&currentTab==2"></div>
                <div class="coupon-none" v-if="exchangeCouponList.length==0&&currentTab==2">
                    <image class="coupon-none-image " src="https://rzico.oss-cn-shenzhen.aliyuncs.com/none-data/kongneirong.png"></image>
                    <text class="coupon-none-text">您还没有相关的兑换券</text>
                </div>
            </div>
        </slider>
    </div>
</template>
<script>
    import {
        list,
        count
    } from '../../../api/coupon'
    import {
        add,
        buyNow
    } from '../../../api/cart'
    import {
        find
    } from '../../../api/product';
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'

    export default {
        name: '',
        data() {
            return {
                currentTab: 0,
                loadinging: false,
                refreshing: false,
                allHeight: '1000px',
                coupon: {
                    mchName: '',
                    mchLogo: ','
                },
                fullReductionCouponList: [],
                exchangeCouponList: [],
                discountCouponList: [],
                productId:'',
                quantity:0,
            }
        },
        created() { // 在实例创建完成后被立即调用
            this.getCouponData()
        },
        methods: {

            bindChange(e) {
                this.currentTab = e.index
                if (e.index == 0) {
                    this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
                } else if (e.index == 1) {
                    this.allHeight = (this.discountCouponList.length * 300) + 60 + 'px'
                } else if (e.index == 2) {
                    this.allHeight = (this.exchangeCouponList.length * 300) + 60 + 'px'
                }
            },
            swichNav: function (e) {
                if (e == 0) {
                    this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
                } else if (e == 1) {
                    this.allHeight = (this.discountCouponList.length * 300) + 60 + 'px'
                } else if (e == 2) {
                    this.allHeight = (this.exchangeCouponList.length * 300) + 60 + 'px'
                }
                if (this.currentTab == e) {
                    return false;
                } else {

                    this.currentTab = e

                }
            },
            //获取优惠券的数据
            getCouponData() {
                list({
                    pageSize: 1000
                }).then(res => {
                    this.coupon.mchName = res.data.data[0].mchName
                    this.coupon.mchLogo = res.data.data[0].mchLogo

                    res.data.data.forEach(item => {
                        if (item.endDate==null) {
                            item.endDate = "永久有效"
                        } else {
                            item.endDate = this.formatTime(item.endDate)
                        }
                        if (item.type === 0) {
                            this.fullReductionCouponList.push(item)
                        } else if (item.type === 1) {
                            this.discountCouponList.push(item)
                        } else if (item.type === 3) {
                            this.exchangeCouponList.push(item)
                        }
                    })
                    if (this.fullReductionCouponList.length > 0) {
                        this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
                    }

                })
            },
            //优惠券去使用的点击事件
            useCoupon: function(id) {
                console.info("点击跳转到对应的页面")
                this.productId = id
                this.findClick()
            },
            findClick() {
                var _this = this
                find(_this.productId ).then(
                    res => {
                        console.log(res)
                        if(res.data.products[0].minLimit > 0){
                            _this.quantity = res.data.products[0].minLimit
                        }else{
                            _this.quantity = 1
                        }
                        _this.buyNowClick()
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            buyNowClick(){
                var _this = this
                let data = {}
                data.productId = _this.productId
                data.promotionId = ""
                data.quantity = _this.quantity
                data.uuid = _this.getGlobalData().uuid,
                    console.log(data)
                buyNow(data).then(
                    res => {
                        if (res.type == 'success') {
                            eeui.openPage({ url: 'root://pages/goods/submit/index.js', statusBarType: "immersion", statusBarStyle:false}, result => {

                            });
                        }
                    }
                ).catch(error => {
                    console.log(error)
                    eeui.toast(error)
                })
            }
        },
        components: {
            myNavbar
        },
    }
</script>

<style scoped>
    .app {
        flex: 1;
        background-color: rgba(248, 248, 248, 0.8);
    }

    .navbar {
        width: 750px;
        height: 100px;
    }

    .swiper-item-box {
        flex: 1;
        width: 750px;
    }

    .refresh {
        height: 60px;
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;

        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .loading {
        justify-content: center;
        height: 50px;
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        flex-direction: row;
        align-items: center;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;

    }

    .coupon_choose {
        width: 750px;
        text-align: center;

        padding-left: 26px;
        padding-right: 26px;
        box-sizing: border-box;
        display: flex;
        height: 100px;
        flex-direction: row;
        background-color: rgb(253, 253, 253);
    }

    .coupon_choose-list {
        width: 250px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .coupon_choose_title_no {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: block;
        padding-bottom: 25px;
    }

    .coupon_choose_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(215, 38, 28, 1);
        display: block;
        padding-bottom: 25px
    }

    .swiper-box {
        display: block;
        flex: 1;
        width: 750px;
    }


    .coupon_choose_line {
        width: 49px;
        height: 10px;
        border-radius: 1px;
        background-color: white;
    }

    .coupon_choose_line_no {
        width: 49px;
        height: 10px;
        border-radius: 1px;
        background-image: linear-gradient(to top, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
    }

    .coupon-shopList {
        margin: 40px 30px 0;
        padding: 30px 20px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        width: 690px;
        flex: 1;
    }

    .coupon-couponList-top {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mchName {
        font-size: 30px;
        font-family: STSongti;
        font-weight: 900;
    }

    .mchLogo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 30px;
    }

    .coupon-couponList {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 30px;
        width: 650px;
        background-color: #FEF7EF;
        border-radius: 16px;
        color: #FF1010;
        margin-top: 30px;
    }

    .coupon-couponList-port1 {
        margin-right: 20px;
        /* flex-grow:2; */
        width: 130px;
        height: 130px;

    }

    .coupon-couponList-port1-inner {
        width: 130px;
        height: 130px;
        justify-content: center;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .coupon-couponList-port1-text1 {
        color: #FF1010;
        font-size: 24px;
        padding-top: 20px;
    }

    .coupon-couponList-port1-text2 {
        font-size: 60px;
        color: #FF1010;
        font-weight: bolder;
        margin-right: 10px;
    }


    .coupon-couponList-port2 {
        margin-right: 20px;

    }

    .coupon-couponList-port2-text1 {
        font-size: 30px;
        color: #FF1010;
        font-weight: 700;
        margin-bottom: 10px;

    }

    .coupon-couponList-port2-text2 {
        font-size: 24px;
        color: #F48583;
        margin-bottom: 5px;
    }

    .coupon-couponList-port2-text3 {
        font-size: 24px;
        color: #F48583;
    }

    .coupon-couponList-port3 {
        height: 40px;
        line-height: 40px;
        flex-grow: 1;
        color: #F48583;
        font-size: 24px;
        border: solid 1px #F48583;
        border-radius: 30px;
        text-align: center;
        padding: 5px;

    }

    .coupon-none {
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin-top: 300px; */
        width: 750px;
		flex: 1;
		/* background-color: red; */
    }

    .coupon-none-image {
        text-align: center;
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }

    .coupon-none-text {
        display: flex;
        flex-direction: row;
        justify-content: center;
        letter-spacing: 5px;
        font-size: 26px;
        font-weight: 400;
        color: #666666;
        line-height: 42px;
        margin-top: 30px;
    }

    /* 底部填充的空白块 */
    .gap {
        height: 50px;
        /* border: solid 1px black; */
    }
    .coupon-couponList-port3{
        height: 36px;
        /* line-height: 40rpx; */
        flex:1;
        border-radius: 30px;
        text-align: center;
        /* padding: 5rpx; */
        display: flex;
        flex-direction: column;
        align-items: center;
        border-width: 1px;
        border-style: solid;
        border-color: #F48583;
    }
    .coupon-couponList-port3_Title{
        color: #F48583;
        font-size: 24px;
    }
</style>
